<template>
  <div class="address">
    <van-panel
      class="address-panel"
      :title="address.name"
      :status="address.tel"
      v-for="(address, index) in addressList"
      :key="index"
    >
      <van-cell>
        <template slot="title">
          <van-tag
            type="danger"
            plain
            v-show="address.isDefault"
          >默认</van-tag>
          <span class="address-detail">{{address.address}}</span>
        </template>
        <van-icon
          slot="right-icon"
          name="edit"
          class="custom-icon"
          @click="onEdit(address,index)"
        />
      </van-cell>
    </van-panel>
    <van-submit-bar
      button-text="新增收件地址"
      @submit="onAdd"
    />
    <div class="bottom-action-bar">
      <van-button
        type="danger"
        block
        square
        @click="onAdd"
      >新增收件地址</van-button>
    </div>
  </div>
</template>

<script>
import {
  Row,
  Col,
  Tag,
  Icon,
  Cell,
  CellGroup,
  Panel,
  Button,
  SubmitBar,
  AddressList
} from 'vant'

export default {
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Tag.name]: Tag,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Panel.name]: Panel,
    [SubmitBar.name]: SubmitBar,
    [Button.name]: Button,
    [AddressList.name]: AddressList
  },
  data () {
    return {
      view: null,
      addlink: null,
      report: '',
      addressList: []
    }
  },

  created () {
    this.axios
      .get('/user/address')
      .then(response => {
        this.addressList = response.data.address
        this.addlink = response.data.addlink
        this.view = this.addressList.filter(item => item.isDefault)[0]
      })
      .catch(function (error) {
        console.log(error)
      })
  },

  methods: {
    onReload () {
      location.reload()
    },

    onAdd () {
      this.$router.push({
        path: '/user/address/add'
      })
    },
    onEdit (item, index) {
      this.$router.push({
        path: '/user/address/edit',
        query: {
          id: item.id
        }
      })
    },

    onDelete (index) {
      let address = this.addressList[index]
      this.$confirm('确认要删除该地址吗？', '', {
        center: true,
        top: '50%',
        customClass: 'el-message-box-icon',
        dangerouslyUseHTMLString: true,
        showClose: false,
        closeOnClickModal: false,
        closeOnPressEscape: false,
        confirmButtonClass: 'el-button--warning'
      }).then(() => {
        console.log(index)
        // 删除收件地址
        this.axios
          .delete('/user/address/delete?id=' + address.id)
          .then(response => {
            this.addressList.splice(index, 1)
          })
          .catch(function (error) {
            console.log(error)
          })
      })
    },

    onChange (view) {
      // 设置默认收件地址
      this.axios
        .post('/user/address/default?id=' + view.id)
        .then(response => {
          if (response.data === true) {
            this.addressList.forEach(function (c) {
              if (c.id === view.id) {
                c.is_default = true
              } else {
                c.is_default = false
              }
            })
          } else {
            this.view = false
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  }
}
</script>

<style lang="less" scoped>
.van-panel {
  /deep/ .van-cell__value {
    color: @blue;
  }
}

.address-panel .address-detail {
  color: #666;
  font-size: 12px;
}
.address-actions {
  -webkit-justify-content: space-between;
  justify-content: space-between;
  font-size: initial;
}
.address-actions label {
  padding: 10px 0;
}
.van-submit-bar__button {
  width: 100%;
}
.custom-icon {
  width: 30px;
  text-align: right;
  align-self: center;
}
</style>
